<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title> - 服务计算 - 中山大学</title>
  <meta name="renderer" content="webkit" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>

<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />

<meta name="theme-color" content="#f8f5ec" />
<meta name="msapplication-navbutton-color" content="#f8f5ec">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="#f8f5ec">


<meta name="author" content="潘茂林" /><meta name="description" content="简单 web 服务与客户端开发实战 1、概述 利用 web 客户端调用远端服务是服务开发本实验的重要内容。其中，要点建立 API First 的开发理念，实现前后端分离，使得团队" /><meta name="keywords" content="中山大学, 数据科学与计算机, 服务计算" />






<meta name="generator" content="Hugo 0.74.3 with theme even" />


<link rel="canonical" href="http://pmlpml.git.io/service-computing/post/ex-services/" />
<link rel="apple-touch-icon" sizes="180x180" href="/service-computing/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/service-computing/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/service-computing/favicon-16x16.png">
<link rel="manifest" href="/service-computing/manifest.json">
<link rel="mask-icon" href="/service-computing/safari-pinned-tab.svg" color="#5bbad5">



<link href="/service-computing/sass/main.min.8c3cbcb0324c2bb4875ceccba4007cbad4b4ac8377f33af9953c3e7684534a50.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.1.20/dist/jquery.fancybox.min.css" integrity="sha256-7TyXnr2YU040zfSP+rEcz29ggW4j56/ujTPwjMzyqFY=" crossorigin="anonymous">


<meta property="og:title" content="" />
<meta property="og:description" content="简单 web 服务与客户端开发实战 1、概述 利用 web 客户端调用远端服务是服务开发本实验的重要内容。其中，要点建立 API First 的开发理念，实现前后端分离，使得团队" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://pmlpml.git.io/service-computing/post/ex-services/" />

<meta itemprop="name" content="">
<meta itemprop="description" content="简单 web 服务与客户端开发实战 1、概述 利用 web 客户端调用远端服务是服务开发本实验的重要内容。其中，要点建立 API First 的开发理念，实现前后端分离，使得团队">

<meta itemprop="wordCount" content="1012">



<meta itemprop="keywords" content="" />
<meta name="twitter:card" content="summary"/>
<meta name="twitter:title" content=""/>
<meta name="twitter:description" content="简单 web 服务与客户端开发实战 1、概述 利用 web 客户端调用远端服务是服务开发本实验的重要内容。其中，要点建立 API First 的开发理念，实现前后端分离，使得团队"/>

<!--[if lte IE 9]>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/classlist/1.1.20170427/classList.min.js"></script>
<![endif]-->

<!--[if lt IE 9]>
  <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->

</head>
<body>
  <div id="mobile-navbar" class="mobile-navbar">
  <div class="mobile-header-logo">
    <a href="/service-computing/" class="logo">服务计算</a>
  </div>
  <div class="mobile-navbar-icon">
    <span></span>
    <span></span>
    <span></span>
  </div>
</div>
<nav id="mobile-menu" class="mobile-menu slideout-menu">
  <ul class="mobile-menu-list">
    <a href="/service-computing/post/index-2020">
        <li class="mobile-menu-item">首页</li>
      </a><a href="/service-computing/post/">
        <li class="mobile-menu-item">归档</li>
      </a><a href="/service-computing/tags/">
        <li class="mobile-menu-item">标签</li>
      </a><a href="/service-computing/about/">
        <li class="mobile-menu-item">关于</li>
      </a>
  </ul>
</nav>
  <div class="container" id="mobile-panel">
    <header id="header" class="header">
        <div class="logo-wrapper">
  <a href="/service-computing/" class="logo">服务计算</a>
</div>

<nav class="site-navbar">
  <ul id="menu" class="menu">
    <li class="menu-item">
        <a class="menu-item-link" href="/service-computing/post/index-2020">首页</a>
      </li><li class="menu-item">
        <a class="menu-item-link" href="/service-computing/post/">归档</a>
      </li><li class="menu-item">
        <a class="menu-item-link" href="/service-computing/tags/">标签</a>
      </li><li class="menu-item">
        <a class="menu-item-link" href="/service-computing/about/">关于</a>
      </li>
  </ul>
</nav>
    </header>

    <main id="main" class="main">
      <div class="content-wrapper">
        <div id="content" class="content">
          <article class="post">
    
    <header class="post-header">
      <h1 class="post-title"></h1>

      <div class="post-meta">
        <span class="post-time"> 0001-01-01 </span>
        
        
      </div>
    </header>

    <div class="post-toc" id="post-toc">
  <h2 class="post-toc-title"></h2>
  <div class="post-toc-content always-active">
    <nav id="TableOfContents">
  <ul>
    <li>
      <ul>
        <li><a href="#简单-web-服务与客户端开发实战">简单 web 服务与客户端开发实战</a>
          <ul>
            <li><a href="#1概述">1、概述</a></li>
            <li><a href="#2xx-开发项目">2、xx 开发项目</a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</nav>
  </div>
</div>
    <div class="post-content">
      <h2 id="简单-web-服务与客户端开发实战">简单 web 服务与客户端开发实战</h2>
<h3 id="1概述">1、概述</h3>
<p>利用 web 客户端调用远端服务是服务开发本实验的重要内容。其中，要点建立 API First 的开发理念，实现前后端分离，使得团队协作变得更有效率。</p>
<p><strong>任务目标</strong></p>
<ol>
<li>选择合适的 API 风格，实现从接口或资源（领域）建模，到 API 设计的过程</li>
<li>使用 API 工具，编制 API 描述文件，编译生成服务器、客户端原型</li>
<li>使用 Github <a href="https://chun-ge.github.io/How-to-establish-an-organization-on-Github/">建立一个组织</a>，通过 API 文档，实现 客户端项目 与 RESTful 服务项目同步开发</li>
<li>使用 API 设计工具提供 Mock 服务，两个团队独立测试 API</li>
<li>使用 travis 测试相关模块</li>
</ol>
<h3 id="2xx-开发项目">2、xx 开发项目</h3>
<ol>
<li>这个是一个团队项目，团队规模建议 6 人以内
<ul>
<li>必须使用github 组织管理你的项目仓库</li>
<li>一个仓库是客户端项目，<strong>必须</strong> 使用富客户端js框架。建议框架包括（<a href="https://cn.vuejs.org/">VUE.js</a>,<a href="https://angular.cn/features">Angular</a>,<a href="https://reactjs.org/">React</a>）</li>
<li>一个仓库是服务端项目，你可以选择 RPC 风格、REST 风格、 GraphQL 构建服务</li>
<li>一个仓库是项目文档，用户可以获得项目简介和 API 说明</li>
</ul>
</li>
<li>你可以自由选择项目，以下是一些建议：
<ul>
<li>自己选择一个项目，如“XX博客”
<ul>
<li>资源类型不能少于 4 个。 如 “极简博客” 包括， users，acticles, reviews, tags &hellip;</li>
<li>数据来源必须真实（请选择自己喜欢的网站抓取），每类资源不能少于 4 个数据</li>
<li>页面参考主流博客结构，但仅需包含主页（https://xxx/:user），博客内容页面，按tag列表</li>
</ul>
</li>
<li>复制 <a href="https://swapi.co/">https://swapi.co/</a> 网站
<ul>
<li>你需要想办法获取该网站所有资源与数据</li>
<li>给出 UI 帮助客户根据明星查看相关内容</li>
</ul>
</li>
</ul>
</li>
<li>项目的要求
<ul>
<li>开发周期
<ul>
<li>2 周</li>
</ul>
</li>
<li>每个项目仓库必须要有的文档
<ul>
<li>README.md</li>
<li>LICENSE</li>
</ul>
</li>
<li>客户界面与美术
<ul>
<li>没要求，能用就好</li>
</ul>
</li>
<li>API 设计
<ul>
<li>API 必须规范，请在项目文档部分给出一个简洁的说明，参考 github v3 或 v4 overview</li>
<li>选择 1-2 个 API 作为实例写在项目文档，文档格式标准，参考 github v3 或 v4</li>
</ul>
</li>
<li>资源来源
<ul>
<li>必须是真实数据，可以从公共网站获取</li>
<li>在项目文档中，<strong>务必注明资源来源</strong></li>
</ul>
</li>
<li>服务器端数据库支持
<ul>
<li>数据库 <strong>只能使用 boltDB</strong>，请 <em>不要使用 mysql 或 postgre 或 其他</em></li>
</ul>
</li>
<li>页面数与 API 数限制
<ul>
<li>界面不能少于 3 个界面</li>
<li>服务 API 不能少于 6 个</li>
</ul>
</li>
<li>API 要求
<ul>
<li>API root 能获取简单 API 服务列表</li>
<li>支持分页</li>
</ul>
</li>
<li><strong>加分项</strong>
<ul>
<li>部分 API 支持 Token 认证</li>
</ul>
</li>
</ul>
</li>
<li>提交物要求
<ul>
<li>每个团队需要提供项目文档首页的 URL。在文档中包含前后端安装指南。
<ul>
<li>前端一般使用 npm 安装</li>
<li>后端使用 go get 安装</li>
</ul>
</li>
<li>每个队员必须提交一个相关的博客，或项目小结（请用markdown编写，存放在文档仓库中）</li>
</ul>
</li>
<li>认证技术提示
<ul>
<li>为了方便实现用户认证，建议采用 JWT 产生 token 实现用户认证。</li>
<li>什么是 jwt？ 官网：https://jwt.io/ 中文支持：http://jwtio.com/</li>
<li>如何使用 jwt 签发用户 token ，用户验证  <a href="http://jwtio.com/introduction.html">http://jwtio.com/introduction.html</a></li>
<li>各种语言工具 <a href="http://jwtio.com/index.html#debugger-io">http://jwtio.com/index.html#debugger-io</a></li>
<li>案例研究：<a href="https://ninghao.net/blog/2834">基于 Token 的身份验证：JSON Web Token</a></li>
</ul>
</li>
</ol>

    </div>

    <div class="post-copyright">
  <p class="copyright-item">
    <span class="item-title"></span>
    <span class="item-content">潘茂林</span>
  </p>
  <p class="copyright-item">
    <span class="item-title"></span>
    <span class="item-content">
        0001-01-01
        
    </span>
  </p>
  
  
</div>
<footer class="post-footer">
      
      <nav class="post-nav">
        <a class="prev" href="/service-computing/post/ex-containerization/">
            <i class="iconfont icon-left"></i>
            <span class="prev-text nav-default"></span>
            <span class="prev-text nav-mobile"></span>
          </a>
        <a class="next" href="/service-computing/post/operation/">
            <span class="next-text nav-default"></span>
            <span class="next-text nav-mobile"></span>
            <i class="iconfont icon-right"></i>
          </a>
      </nav>
    </footer>
  </article>
        </div>
        

  

  

      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="social-links">
      <a href="mailto:panml@mail.sysu.edu.cn" class="iconfont icon-email" title="email"></a>
  <a href="http://pmlpml.git.io/service-computing/index.xml" type="application/rss+xml" class="iconfont icon-rss" title="rss"></a>
</div>

<div class="copyright">
  <span class="power-by">
    %!(EXTRA string=<a class="hexo-link" href="https://gohugo.io">Hugo</a>)
  </span>
  <span class="division">|</span>
  <span class="theme-info">
     - 
    <a class="theme-link" href="https://github.com/olOwOlo/hugo-theme-even">Even</a>
  </span>

  

  <span class="copyright-year">
    &copy; 
    2018 - 
    2020
    <span class="heart">
      <i class="iconfont icon-heart"></i>
    </span>
    <span class="author">潘茂林</span>
  </span>
</div>
    </footer>

    <div class="back-to-top" id="back-to-top">
      <i class="iconfont icon-up"></i>
    </div>
  </div>
  
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/slideout@1.0.1/dist/slideout.min.js" integrity="sha256-t+zJ/g8/KXIJMjSVQdnibt4dlaDxc9zXr/9oNPeWqdg=" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.1.20/dist/jquery.fancybox.min.js" integrity="sha256-XVLffZaxoWfGUEbdzuLi7pwaUJv1cecsQJQqGLe7axY=" crossorigin="anonymous"></script>



<script type="text/javascript" src="/service-computing/js/main.min.d7b7ada643c9c1a983026e177f141f7363b4640d619caf01d8831a6718cd44ea.js"></script>








</body>
</html>
